* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.nav {
  display: flex;
  position: relative;
  border-bottom: 1px solid #ccc;
  margin-top: -1px;
}
.navbox {
  width: 100px;
  height: 44px;
  /* border: 30px solid red; */
  color: blue;
  font-size: 14px;
  font-weight: 700;
  line-height: 44px;
  /* border-image-source: url(../images/小熊.jpg); */
  cursor: pointer;
  /* background-image: -webkit-linear-gradient(left top, red, green, blue); */
}
/* 选择 class 属性中同时有 name1 和 name2 的所有元素 */
.navbox.active {
  font-weight: 900;
  border-bottom: 1px solid #ccc;
}
.nav .bar {
  position: absolute;
  bottom: 0;
  width: 50px;
  height: 3px;
  border-radius: 1px;
  background-color: orange;
  transition: .5s;
  /* transform: translateX(); */
}
.navbox:hover {
  border-bottom: 1px solid #ccc;
}
.content {
  display: flex;
  /* width: 1500px; */
  width:calc(100vh * 4);
  height: calc(100vh - 101px);
  transition: .5s;
}
.contentItem {
  width: 375px;
  /* height: 100%; */
}
.banner {
  width: 375px;
  height: 80px;
}
.banner img {
  width: 100%;
  height: 100%;
}
.banner h2 {
  padding: 0 25px;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
}
.newContent {
  height: 300px;
}
.newContent .line {
  margin: 0 30px;
  width: 2px;
  height: 100%;
  background-color: #ddd;
}
.newContent .newList {
  width: 100%;
}
